import {createContext} from 'react'
import {createPortal} from 'react-dom'
// prtal 传送门，可以将react中的元素传递到任意的dom结构中
// createPortal(reactElement,dom)

// 创建一个dom元素
let md=document.createElement('div')
md.id='md'
document.body.appendChild(md)
type Itheme={
    color:string
}
//括号中接收的是默认值
// 当没有Provider时，会使用默认值
let {Provider,Consumer}=createContext<Itheme>({color:'green'}) 
// Provider 提供

// Consumer 消费

type Iprops={
    name:string
}

// A组件
function A(){
    let name='123'
    return(
        <fieldset>
            <legend>A组件</legend>
            {/* <Provider value={{color:'red'}}> */}
                <h3>A组件</h3>
            <B name={name}/>
            {/* </Provider> */}
        </fieldset>
    )
}

// B组件
function B(props:Iprops){
    return(
        <fieldset>
            <legend>B组件</legend>
            <h3>B组件</h3>
            <C name={props.name}/>
        </fieldset>
    )
}

// A组件
function C(props:Iprops){
    return(
        <fieldset>
            <legend>C组件</legend>
                <h3>C组件</h3>
            <D name={props.name}/>
        </fieldset>
    )
}

// A组件
function D(props:Iprops){
    let el=(
        <fieldset>
            <legend>D组件</legend>
            <Consumer>
                {
                    (theme)=>{
                        return(
                            <h3 style={{color:theme.color}}>D组件</h3>
                        )
                    }
                }
            </Consumer>
        </fieldset>
    )
    return createPortal(el,md)
}

export default A